<h1>Type list</h1>
<hr/>

<div class="card-body clearfix" style="padding: 0 0 1em 0">
  <button type="button"
          *permissionLink="['base.framework.type.add']"
          class="btn btn-success btn-sm"
          [routerLink]="['/framework/type/add']">
    <i class="fas fa-plus"></i> Add
  </button>
  <span class="card-group float-right" *permissionLink="'base.export.type.*'">
    <div class="btn-group">
      <button type="button" id="exportButton" class="btn btn-warning btn-sm dropdown-toggle"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <fa-icon icon="file-export"></fa-icon> Export
      </button>
      <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left" aria-labelledby="exportButton">
        <li id="export-type" [className]="'dropdown-item'"
            (click)="exportingFiles()">
          <fa-icon icon="file-code"></fa-icon> JSON
          <span *ngIf="selectedObjects.length == 0">( all )</span>
          <span *ngIf="selectedObjects.length > 0"> ( {{selectedObjects.length}} )</span>
        </li>
      </ul>
    </div>
  </span>
</div>


<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"
       id="type-list-datatable" class="table table-striped table-bordered">
  <thead>
  <tr>
    <th><input type="checkbox" class="selectAll" name="selectAll" value="all" (click)="selectAll()"></th>
    <th>Active</th>
    <th>Public ID</th>
    <th>Type</th>
    <th>Author</th>
    <th>Creation time</th>
    <th *permissionLink="['base.framework.type.add', 'base.framework.type.edit', 'base.framework.type.delete']">Action</th>
    <th *permissionLink="['base.framework.type.clean']">Cleanup Database</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let typeInstance of typeList">
    <td></td>
    <td><cmdb-active-badge [activeStatus]="typeInstance.active"></cmdb-active-badge></td>
    <td scope="row">{{typeInstance.public_id}}</td>
    <td><cmdb-type-label [faIcon]="typeInstance?.render_meta?.icon" [title]="typeInstance.label"></cmdb-type-label></td>
    <td>{{userService?.getUser(typeInstance?.author_id).user_name | async}}</td>
    <td>{{typeInstance.creation_time.$date | date:"dd/MM/yyyy - HH:mm:ss"}}</td>
    <td *permissionLink="['base.framework.type.add', 'base.framework.type.edit', 'base.framework.type.delete']">
      <a *permissionLink="'base.framework.type.edit'"
         class="text-dark" routerLink="/framework/type/edit/{{typeInstance.public_id}}">
        <fa-icon [icon]="['far', 'edit']"></fa-icon>
      </a>
      <a *permissionLink="'base.framework.type.add'"
         class="ml-1 text-dark" [routerLink]="['/framework/type/add/']" [queryParams]="{copy: typeInstance.public_id}">
        <fa-icon [icon]="['far', 'clone']"></fa-icon>
      </a>
      <a *permissionLink="'base.framework.type.delete'"
         class="ml-1 text-dark" routerLink="/framework/type/delete/{{typeInstance.public_id}}">
        <fa-icon [icon]="['far', 'trash-alt']"></fa-icon>
      </a>
    </td>
    <td *permissionLink="['base.framework.type.clean']">
      <fieldset [disabled]="typeInstance.clean_db !== false ? true : false">
        <button type="button" class="btn badge-pill" (click)="cleanupDatabase(typeInstance)"
                data-toggle="modal" data-target="#cleanup-progress-modal"
                [ngClass]="typeInstance.clean_db === false ? 'btn-danger' : 'btn-success'">clean
          <fa-icon *ngIf="typeInstance.clean_db === false" icon="exclamation-circle"></fa-icon>
          <fa-icon *ngIf="typeInstance.clean_db !== false" icon="check-circle"></fa-icon>
        </button>
      </fieldset>
    </td>
  </tr>
  </tbody>
</table>


<!-- cleanup-progress-modals -->
<div class="modal fade" id="cleanup-progress-modal"
     data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="cleanup-progress-modal"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!--Content-->
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header">
        <h4 class="modal-title"><fa-icon icon="broom"></fa-icon> Cleanup Database</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" class="white-text">&times;</span>
        </button>
      </div>

      <!--Body-->
      <div class="modal-body">
        <div class="card-body">
          <h5>Remove fields</h5>
          <div class="progress">
            <div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar"
                 [ngClass]="remove ? 'bg-success' : 'bg-primary'"
                 aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
            </div>
          </div>
          <ng-container *ngIf="!remove"><p class="text-right">in process <fa-icon icon="exclamation"></fa-icon></p></ng-container>
          <ng-container *ngIf="remove"><p class="text-right">done <fa-icon icon="check"></fa-icon></p></ng-container>

          <h5>Update fields</h5>
          <div class="progress">
            <div class="progress-bar progress-bar-striped" role="progressbar"
                 [ngClass]="update ? 'bg-success' : 'bg-primary'"
                 aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
            </div>
          </div>
          <ng-container *ngIf="!update"><p class="text-right">in process <fa-icon icon="exclamation"></fa-icon></p></ng-container>
          <ng-container *ngIf="update"><p class="text-right">done <fa-icon icon="check"></fa-icon></p></ng-container>
        </div>
      </div>

      <!--Footer-->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Done</button>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
<!-- cleanup-progress-modals-->
